<template>
  <div class="orderdetailing-content">
    <!-- <div class="shoplist" v-for="(item,index)  in arr" :key="index" @click="tostoredetail(index)">
      <div class="shopleftbox">
        <img :src="item.image">
      </div>
      <div class="shoprightbox">
        <div class="shoptbox">{{ item.dinName }}</div>
        <div class="shopmbox">
          <div>
            <van-rate
              class="shoprate"
              :value="parseInt(item.grade)"
              :size="15"
              disabled
              disabled-color="#ff9910"
            />
            {{ item.grade }}分
          </div>
          <div>餐盒费：{{ item.box }}元</div>
        </div>
        <div class="shopbbox">
          <div>简介：{{ item.concent }}</div>
          <div style="color:#ff9b00">
            <van-icon name="location-o"/>
            {{ item.distance/1000 }}km
          </div>
        </div>
      </div>
    </div>-->
    <div id="allmap" class="mymap"></div>


    <logic ref="xx"></logic>
  </div>
</template>
<script>
var mapObj = null;
import logic from './logic'

export default {
  data() {
    return {
      timer: null,
      distance1: null,
      arr: [],
      noneimg: require("@/assets/img/none.png"),
      userimg: null,
      ridelon: null, // 骑手的位置
      ridelat: null,
      orderid: null,
      dinlon: null,
      dinlat: null,
      text: ""
    };
  },
  components: {
    logic
  },
  beforeCreate: function () {

    //创建前
  },
  activated() {
    this.Suk_getlist();
  },
  created: function () {
    this.android_location()
    // localStorage.setItem("long", 114.498424)
    // localStorage.setItem("lat", 36.600709)
    this.Suk_getlist();
    this.Suk_getdis();


    //创建后
  },
  beforeMount: function () {
    //挂载前
  },
  mounted: function () {
    this.Suk_getlist();
    // this.socket();
    //挂载后
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  beforeUpdate: function () {
    //更新前
  },
  update: function () {
    //更新后
  },
  methods: {
    // socket() {
    //   console.log(localStorage.getItem("sorderid"), "ordeid");
    //   this.orderid = this.$route.params.orderid;
    //   var wsLogin = "ws://wqnm.free.idcfengye.com/paotui/echo";
    //   var ws = new WebSocket(wsLogin);
    //   ws.onopen = function() {
    //     // Web Socket 已连接上，使用 send() 方法发送数据
    //     var obj = {
    //       sendid: localStorage.getItem("sorderid")
    //     };
    //     ws.send(JSON.stringify(obj));
    //   };
    //   ws.onmessage = function(message) {
    //     // 消息监听
    //     console.log(message.data, "distance");
    //   };
    // },
    android_location() {
      let that = this;
      dsBridge.call("getLocation");
      dsBridge.register("setLocation", function (data) {
        // alert(JSON.parse(data).City);
        let str = JSON.parse(data);
        localStorage.setItem("long", str.longitude);
        localStorage.setItem("lat", str.latitude);
        //
        // localStorage.setItem("long", 114.498424)
        // localStorage.setItem("lat", 36.600709)
      });
    },
    // 这是我们的高德地图
    loadmap() {

      let that = this;
      mapObj = new AMap.Map("allmap", {
        resizeEnable: true,
        zoom: 14,
        center: [this.ridelon, this.ridelat]
      });
      var marker1 = new AMap.Marker({
        position: [localStorage.getItem("long"), localStorage.getItem("lat")]
      });
      var marker2 = new AMap.Marker({
        position: [this.ridelon, this.ridelat], // 这是骑手位置
        animation: "AMAP_ANIMATION_BOUNCE",
        icon: require("@/assets/img/rideloc.png")
      });
      var marker3 = new AMap.Marker({
        position: [this.dinlon, this.dinlat], // 这是商家位置
        animation: "AMAP_ANIMATION_BOUNCE",
        icon: require("@/assets/img/icon_cwsj_grzx.png")
      });

      //构造路线导航类
      AMap.service('AMap.Riding', function () {//回调函数
        var riding = new AMap.Riding({
          map: mapObj,
          panel: "panel",
        });
        // 根据起终点经纬度规划驾车导航路线
        riding.search(new AMap.LngLat(that.ridelon, that.ridelat), new AMap.LngLat(that.dinlon, that.dinlat), that.driveRouteResult);

        riding.search(new AMap.LngLat(that.dinlon, that.dinlat), new AMap.LngLat(localStorage.getItem("long"), localStorage.getItem("lat")), that.driveRouteResult);
      })

      var markerList = [marker1, marker2, marker3];
      mapObj.add(markerList);
    },
    driveRouteResult(status, result) {
      if (status === 'complete' && result.info === 'OK') {
        console.debug("route ok");
        this.showRoutes(result.routes);
      } else {
        console.debug("error=" + result);
      }
    },
    showRoutes(routes) {
      debugger
      var that = this
      $(routes).each(function (index, route) {
        var arrayRoute = new Array();//all points
        $(route.rides).each(function (index, ride) {
          that.drawPolyline(mapObj, ride.path);
          arrayRoute = arrayRoute.concat(ride.path);
        });
        //var car = that.addMarker(mapObj);
        console.debug("all pts=" + arrayRoute);
        //car.moveAlong(arrayRoute, 500, null, true);//animation
        mapObj.setFitView();
      });
    }
    ,
    drawPolyline(mapObj, arrayLine) {
      var polyline = new AMap.Polyline({
        map: mapObj,
        path: arrayLine,
        strokeColor: "#3366FF", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
        strokeDasharray: [10, 5] //补充线样式
      });
      return polyline;
    },
    addMarker(mapObj) {
      var car = new AMap.Marker({
        id: "test01",
        position: new AMap.LngLat(116.397428, 39.90923),
        icon: require("@/assets/img/rideloc.png"),
        autoRotation: true,
        map: mapObj
      });
      return car;
    }
    ,
    Suk_getdis() {
      let that = this;
      this.timer = setInterval(() => {
        let Sukdata = {
          orderInfoId: localStorage.getItem("sorderid")
        };
        console.log(Sukdata);
        that.axios
          .post(
            that.baseUrl + "/order/addDistance",
            that.Qs.stringify(Sukdata),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function (res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data, "disdis");
                that.distance1 = res.data.data.distance;
                that.ridelon = res.data.data.qijindu;
                that.ridelat = res.data.data.qiweidu;
                that.loadmap();

                let Sukdata = {
                  orderInfoId: localStorage.getItem("sorderid")
                };
                that.axios
                  .post(that.baseUrl + "/ridingOrder/find", that.Qs.stringify(Sukdata), {
                    headers: {
                      "Content-Type": "application/x-www-form-urlencoded"
                    }
                  })
                  .then(function (res) {

                    that.dinlon = res.data.data.dinlong;
                    that.dinlat = res.data.data.dinlat;
                    let status = localStorage.getItem("sordertype")
                    if (status == 0) {
                      that.text = " \n 等待接单 \n "

                      that.$refs.xx.logisticsList = [
                        {
                          message: '商家已确认订单，骑手抢单中'
                        }
                      ]
                    } else if (status == 1) {

                      that.text = " \n 已接单 \n "
                      that.$refs.xx.logisticsList = [
                        {
                          message: '骑手已接单，正在赶往商家',
                          messageDate: res.data.data.getTime
                        }, {
                          message: '商家已确认订单，骑手抢单中'
                        }
                      ]
                    } else if (status == 2) {

                      that.text = " \n 配送完成 \n "
                      that.$refs.xx.logisticsList = [
                        {
                          message: '已完成此单',
                          messageDate: res.data.data.endTime
                        }, {
                          message: '骑手正在送货，请耐心等待....',
                          messageDate: res.data.data.getTime
                        }, {
                          message: '骑手已接单，正在赶往商家',
                          messageDate: res.data.data.getTime
                        }, {
                          message: '商家已确认订单，骑手抢单中'
                        }
                      ]
                    } else if (status == 5) {
                      that.text = " \n 配送中,预计送达时间  \n " + res.data.data.appointTime

                      that.$refs.xx.logisticsList = [
                        {
                          message: '骑手正在送货，请耐心等待....',
                          messageDate: res.data.data.getTime
                        }, {
                          message: '骑手已接单，正在赶往商家',
                          messageDate: res.data.data.getTime
                        }, {
                          message: '商家已确认订单，骑手抢单中'
                        }
                      ]
                    }
                    that.text = that.text + " \n 骑手正在：" + res.data.data.remark + " \n "
                    that.text = " \n 骑手距离您还有" + parseInt(that.distance1 / 1000) + "米" + that.text + " \n "

                  })

                that.$refs.xx.title = that.text
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      }, 10000);
    }
    ,
    Suk_getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      let Sukdata = {
        orderInfoId: that.$route.params.orderid
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/order/addDistance", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.arr = res.data.data;
              // that.ridelon = res.data.data[0].longitude;
              // that.ridelat = res.data.data[0].latitude;
              console.log(that.ridelon, 11111);
              that.distance1 = res.data.data.distance;
              that.ridelon = res.data.data.qijindu;
              that.ridelat = res.data.data.qiweidu;
              that.loadmap();
              // that.socket();
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
  }
}
;
</script>
<style lang="scss" scoped>
.shoplistbox {
  background: #fff;
  margin-top: 1rem;

  h1 {
    font-weight: 500;
    height: 2.1rem;
    line-height: 2.1rem;
    font-size: 1.5rem;
    color: #ff9b00;
    text-indent: 1.5rem;
    border-bottom: 2px solid #ffe1b0;
  }

  .shoplist {
    display: flex;
    width: 100%;
    align-items: center;
    // padding: 0.2rem 0;
    justify-content: space-between;

    .shopleftbox {
      width: 7.5rem;
      height: 6rem;
      border-radius: 1rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .shoptbox {
      font-size: 0.4rem;
    }

    .shoprightbox {
      color: #2f2e2e;
      width: 80%;
      height: 7.5rem;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-around;

      .shoprate {
        display: inline-block;
      }

      .shopmbox {
        display: flex;
        justify-content: space-between;
      }

      .shopbbox {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

#allmap {
  width: 100%;
  height: 10rem;
}
</style>
